<template>
  <section class="PersonIndex-container">
    <div class="basic">
      <person-basic> </person-basic>
    </div>
    <div class="card">
      <quick-card-list :items="item">
        <template slot-scope="scope">
          <person-card :item="scope.item"></person-card>
        </template>
      </quick-card-list>
    </div>
    <div class="static">
      <div class="static-left"></div>
      <div class="static-right"></div>
    </div>
  </section>
</template>
  
<script>
import PersonBasic from "./PersonBasic.vue";
import PersonCard from "./PersonCard.vue";
export default {
  components: {
    PersonBasic,
    PersonCard,
  },
  data() {
    return {
      item: [
        { name: "绩效", count: "100.0", direction: 23, status: 1 },
        { name: "项目", count: "200", direction: 23, status: 1 },
        { name: "出差", count: "100", direction: 32, status: 1 },
        {
          name: "加班",
          count: "19h8s",
          direction: 12,
          status: 0,
        },
      ],
    };
  },
};
</script>
  
  <style scoped lang="scss">
.PersonIndex-container {
  height: 100%;
  .basic {
    width: 100%;
  }
  .card {
    width: 100%;
  }
  .static {
    width: 100%;
    display: flex;
    padding: 10px;
    .static-left {
      width: 60%;
      height: 400px;
      border: 1px solid red;
    }
    .static-right {
      width: 20%;
      height: 400px;
      border: 1px solid pink;
    }
  }
}
</style>